<template>
<div>
	<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
			<el-form :inline="true">
			  	<el-col :span="24">
					<el-form-item lable="方案代码" style="width: 12%;">
						<el-input v-model="formData.plancode" size="small" placeholder="方案代码"></el-input>
					</el-form-item>
					<el-form-item lable="方案名称">
						<el-input v-model="formData.plancname" size="small" placeholder="方案名称"></el-input>
					</el-form-item>
					<el-form-item lable="险种代码" style="width: 10%;">
						<el-select v-model="formData.riskcode" placeholder="险种代码" filterable clearable size="small">
							<el-option v-for="item in riskOptions" :key="item.riskcode" :label="item.riskcode + '-' + item.riskcname" :value="item.riskcode"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item lable="险种版本"  style="width: 8%;">
						<el-input v-model="formData.riskversion" size="small" placeholder="险种版本"></el-input>
					</el-form-item>
					<!-- <el-form-item lable="序号"  label-width="150px" :span="3">
						<el-input v-model="formData.serialno" size="small" placeholder="序号"></el-input>
					</el-form-item> -->
					<el-form-item lable="创建日期">
						<el-date-picker type="date" placeholder="创建日期" v-model="formData.createdate" size="small"></el-date-picker>
					</el-form-item>
					<el-form-item lable="是否有效"  style="width: 10%;">
						<el-select v-model="formData.validstatus" placeholder="是否有效" size="small">
							<el-option v-for="item in validOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="primary" @click="queryData()" icon="search">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button size="small" @click="reset()">
							<i class="fa fa-undo"></i>
							重置
						</el-button>
					</el-form-item>
			  	</el-col>
			</el-form>
		</el-col>

		<el-table :data="tableData" v-loading="loading" element-loading-text="处理中......" ref="multipleTable" border style="width: 100%;" :height="tableHeight" :highlight-current-row="true" @sort-change="orderBy" @row-click="rowSelect" @row-dblclick="showDetail" @selection-change="rowSelected">
		 	<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="plancode" label="方案代码" sortable="custom" width="150"></el-table-column>
			<el-table-column prop="riskcode" label="险种代码" sortable="custom" show-overflow-tooltip width="150"></el-table-column>
			<el-table-column prop="riskversion" label="险种版本" sortable="custom" width="120"></el-table-column>
			<el-table-column prop="plancname" label="方案中文名称" sortable="custom" show-overflow-tooltip min-width="250"></el-table-column>
			<el-table-column prop="plantype" label="方案类型" width="200" :formatter="planTypeFormater"></el-table-column>
			<el-table-column prop="period" label="保险期限值" width="130"></el-table-column>
			<el-table-column prop="periodtype" label="保险期限方式" width="130" :formatter="periodTypeFormater"></el-table-column>
			<el-table-column prop="validstatus" label="是否有效" sortable="custom" width="120" :formatter="validFormater"></el-table-column>
		</el-table>

		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
			<el-form :inline="true">
				<el-col :span="14">
					<el-col :span="24">
						<el-form-item>
							<el-button size="small" type="warning" @click="openAddDialog()" icon="plus">新增</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="openEditDialog()" icon="edit">修改</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="default" @click="openLogDialog">
								<i class="fa fa-search-plus"></i>
								查看日志
							</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="warning" @click="openLinkPropsDialog()"><i class="fa fa-plus-square-o"></i> 配置条件因子</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="warning" @click="openCopyPlanDialog()"><i class="fa fa-copy"></i> 复制方案</el-button>
						</el-form-item>
					</el-col>
				</el-col>
				<el-col :span="10">
					<div class="block" style="float:right">
					    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					      :current-page="formData.currentPage"
					      :page-sizes="[15, 30, 45]"
					      :page-size="formData.pageSize"
					      layout="total, sizes, prev, pager, next, jumper"
					      :total="total">
					    </el-pagination>
					  </div>
				</el-col>
			</el-form>
		</el-col>



		  <PlanAdd v-if="showAddDialog"></PlanAdd>
		  <PlanAdd2 v-if="showAdd2Dialog"></PlanAdd2>
		  <PlanEdit v-if="showEditDialog"></PlanEdit>
		  <PlanEdit2 v-if="showEdit2Dialog"></PlanEdit2>
		  <PlanCopy v-if="showCopyDialog"></PlanCopy>
		  <PlanCopy2 v-if="showCopy2Dialog"></PlanCopy2>
		  <PlanDetail v-if="showDetailDialog"></PlanDetail>
		  <PlanDetail2 v-if="showDetail2Dialog"></PlanDetail2>
		  <Log v-if="showLogDialog"></Log>
		  <LinkProps v-if="showLinkPropsDialog"></LinkProps>
		  <IsConfigProps v-if="showIsConfigPropsDialog"></IsConfigProps>

</div>
</template>

<script>
import PlanAPI from "../../../js/production/plan/planAPI"
import dateUtil from "../../../common/js/dateUtil"
import Utils from"../../../js/production/utils";
import PlanAdd from "./dialog/PlanAdd";
import PlanAdd2 from "./dialog/PlanAdd2";
import PlanEdit from "./dialog/PlanEdit";
import PlanEdit2 from "./dialog/PlanEdit2";
import PlanCopy from "./dialog/PlanCopy";
import PlanCopy2 from "./dialog/PlanCopy2";
import PlanDetail from "./dialog/PlanDetail";
import PlanDetail2 from "./dialog/PlanDetail2";
import Log from "../common/Log";
import LinkProps from "./dialog/LinkProps";
import IsConfigProps from "./dialog/IsConfigProps";
export default {
  components : {
  	PlanAdd,
  	PlanAdd2,
  	PlanEdit,
  	PlanEdit2,
  	PlanCopy,
  	PlanCopy2,
  	PlanDetail,
  	PlanDetail2,
  	Log,
  	LinkProps,
    IsConfigProps,
  },
  data () {
    	return {
    		formData: {
    		        currentPage: 1,
	                    pageSize: 15,
	                    plancode: '',
	                    riskcode: '',
	                    riskversion: '',
	                    plancname: '',
	                    serialno: '',
	                    createdate: undefined,
	                    validstatus: '',
	                    orderBy: '',
	                    order: '',
    		},
    		tableData: [],
    		selectedRows: [],
    		total: 0,
		riskOptions: [],
		validOptions: [{
			label : '有效',
			value: '1'
		},{
			label : '无效',
			value: '0'
		}],
		isSortRequest: false,	//是否请求
		showEditDialog: false,
		showEdit2Dialog: false,
		showCopyDialog: false,
		showCopy2Dialog: false,
		showAddDialog: false,
		showAdd2Dialog: false,
		showDetailDialog: false,
		showDetail2Dialog: false,
		showLogDialog: false,
		showLinkPropsDialog : false,
    showIsConfigPropsDialog: false,
		rowDetail: {},
		tableHeight: 0,
		logBusinessKey: '',
		logBusinessKeyValue: '',
		loading : false,
	}
  },
  mounted() {
  	PlanAPI.initRiskSelect(this);
  	this.tableHeight = Utils.getScreenHeight()*0.72;
  	let vm = this;
  	document.onkeydown = function(e) {
  		if(e.keyCode == 13) {
  			vm.queryData();
  		}
  	}
  },
  methods: {
  	dateFormater(row,  column) {  
		var  date  =  row[column.property];            
		if  (date  ==  undefined)  {               
			return  "";            
		}  
		return dateUtil.getDateyMd(date);
	},
	validFormater(row,  column) {  
		var  valid =  row[column.property];            
		if  (valid ==  undefined)  {               
			return  "";            
		}  
		if (valid == 1) {
			return "有效";
		}
		if (valid == 0) {
			return "无效";
		}
	},
	planTypeFormater(row,  column) {
		let planType = row[column.property];
		switch(planType) {
			case 'a':{
				return "非定额";
				break;
			}
			case 'b':{
				return "定额定险别";
				break;
			}
			case 'c':{
				return "定险别定费率";
				break;
			}
			case 'd':{
				return "定额定险别定费率定保费";
				break;
			}
		}
	},
	periodTypeFormater(row,  column) {
		let periodType = row[column.property];
		switch(periodType) {
			case '3':{
				return "天";
				break;
			}
		}
	},
	rowSelect(row) {
		this.$refs.multipleTable.toggleRowSelection(row);
	},
	rowSelected(rows) {
		this.selectedRows = rows;
	},
	queryData() {
		if (this.formData.createdate === '') {
			this.formData.createdate = undefined;
		}
		PlanAPI.query(this);
	},
	reset() {
		this.formData.plancode = '';
		this.formData.plancname = '';
                    	this.formData.riskcode = '';
                    	this.formData.riskversion = '';
                    	this.formData.serialno = '';
		this.formData.createdate = undefined;
                    	this.formData.validstatus = '';
                    	this.formData.currentPage = 1;
                    	PlanAPI.query(this);
	},
	handleSizeChange(val) {
		this.formData.pageSize = val;
		PlanAPI.query(this);
	},
	handleCurrentChange(val) {
		this.formData.currentPage = val;
		PlanAPI.query(this);
	},
	orderBy(column, prop, order) {
		if (typeof(column) != 'undefined') {
			this.formData.orderBy = column.prop;
			if (column.order == 'descending') {
				this.formData.order = 'desc';
			} else {
				this.formData.order = 'asc';
			}
		}
		if (this.isSortRequest) {
			this.isSortRequest = false;
			PlanAPI.query(this);
		}
	},
	openAddDialog(){
		PlanAPI.openAddDialog(this);
	},
	openEditDialog(){
		PlanAPI.openEditDialog(this);
	},
	showDetail(row, event) {
		if(row.plancode.length !== 13) {
			this.$message({type: 'error',message: '只能对新方案进行操作，老方案请联系线下人员操作!'});
			return;
		}
		this.rowDetail = row;
    if (PlanAPI.isPlanOfRating(row.plancode)) {
		  this.showDetail2Dialog = true;
    } else {
		  this.showDetailDialog = true;
    }
	},
	openLogDialog() {
		 if (this.selectedRows.length > 1) {
                            this.$message({type: 'error',message: '只能选择一行数据进行查看'});
                            return;
                        } else if (this.selectedRows.length < 1) {
                            this.$message({type: 'error',message: '请选择方案！'});
                            return;
                        }
		this.logBusinessKey = this.selectedRows[0].plancname;
		this.logBusinessKeyValue = this.selectedRows[0].plancode;
		this.showLogDialog = true;
	},
	openLinkPropsDialog() {
		PlanAPI.openLinkPropsDialog(this);
	},
	openCopyPlanDialog() {
		PlanAPI.openCopyDialog(this);
	}
  }
}
</script>
